<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>省钱控</title>
</head>
<link rel="stylesheet" href="css/moneyctrl.css">
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.js"></script>
<script src="js/template.js"></script>
<script src="lib/jquery/jquery.js"></script>
<script src="js/moneyctry.js"></script>
<body>
<!--顶部-->
<div class="shen clearfix ">
    <a href="index.html" class="glyphicon glyphicon-chevron-left fl"></a>

    <div class="fl">省钱控—最新优惠</div>
    <img src="images/header_app.png" alt="" class="fr">
</div>


<!--商品-->
<div class="main">
    <div class="product">
        <ul class="dianshi">
        </ul>
        <div class="page clearfix">
            <button id="shang">上一页</button>
            <select  id="select">
            </select>
            <button id="xia">下一页</button>
        </div>
    </div>
</div>





<!--底部-->
<ul class="na clearfix" role="tablist">
    <li><a href="#">登陆</span></a></li>
    <li><a href="#">注册</a></li>
    <li><a href="#">返回顶部 </a></li>
</ul>
<div class="gong">手机APP下载<a href=""> 慢慢买手机版 --掌上比价平台</a>
    <p>m.m.maimai.com</p>
</div>
</body>
<script>
    function on_load(pageid) {

        $.ajax({
            type: 'get',
            url: 'http://192.168.23.81:3000/api/getmoneyctrl?'+'pageid='+pageid,
            dataType: 'json',
            success:function (data) {
                console.log(data);
                var html = template("templat", data);
                $(".main .product ul").html(html);
                pages = Math.ceil(data.totalCount / data.pagesize)
                var option = "";
                for (var i = 0; i <pages; i++) {
                    option += '<option value="' +(i) + '">' + (i +1) + '/' + pages + '</option>';
                }
                $("#select").html(option);
                $("#select").val(pageid);
            }
        })
    }
    var pageid = 0;
    on_load(pageid);
    $("#shang").on("click", function () {
        pageid -= 1;
        if (pageid >-1) {
            on_load(pageid)
        }
        else  {
            pageid = pages - 1;
            on_load(pageid)
        }
    });
    $("#xia").on("click", function () {
        pageid += 1;
        if (pageid < pages) {
            on_load(pageid);
        }
        else  {
           pageid=0
            on_load(pageid)
        }
    })
    $("#select").on("input", function () {
        pageid = Number($(this).val())
        on_load(pageid)
    });
</script>
<script type='text/html' id='templat'>
    {{if result}}
    {{each result as value}}
    <div class="shangpin">
        <div class="media-left">
            <a href="getinlanddiscount.html?productid={{value.productId}}">
                {{#value.productImg2}}
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{value.productName}}</h4>
            <h5 color="orange">{{value.productPinkage}}</h5>
            <h5><a href="">{{value.productFrom}}</a></h5>
        </div>
    </div>
    {{/each}}
    {{/if}}
    <!--</script>
</html>